<template>
	<view class="feedback">
		<loading v-if="loading"></loading>
		<view v-else>
			<view class="pagetitle">
				<uni-breadcrumb separator="/">
					<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
						{{route.name}}
					</uni-breadcrumb-item>
				</uni-breadcrumb>
				<view class="right">
					<view class="select" style="width:200px;margin:0 20px">
						<uni-data-select v-model="selectTimeVal" :localdata="range" @change="changeDateSelect"></uni-data-select>
					</view>
					<view class="" style="display: flex;width:400px;">
						<uni-easyinput errorMessage v-model="searchVal" focus placeholder="搜索内容"></uni-easyinput>
						<button size="mini" plain style="margin:5rpx 10rpx;">搜索</button>
					</view>
				</view>
			</view>
			<view v-if="Data.length == 0" class="null" >
				
				<uni-icons type="circle" color="#999" size="30"></uni-icons>
				&nbsp;暂无内容
			</view>
			<view class="cards"  >
				
				<view class="box_list animated-item" 	v-for="(item,index) in Data" >
					<view class="title">
						<text class="text" style="font-weight:bold">
							{{item.nickname}}
						</text>
						<text class="text">
							
						</text>
					</view>
					<view class="body_row">
						<view class="center">
							{{item.shop_title}}
						</view>
						<view class="right">
							{{item.type}}
						</view>
					</view>
					<view class="body_row">
						<view class="center">
							{{item.tel}}
						</view>
						<view class="right">
							<uni-collapse style="background:#f9f9f9;" >
								<uni-collapse-item style="background:#f9f9f9;" :title="item.content?item.content:'暂无'" :show-animation="true">
									<view class="" style="background:#f9f9f9;">
										<text class="text">
											{{item.content}}
										</text>
									</view>
								</uni-collapse-item>
							</uni-collapse>
						</view>
					</view>
					<view class="body_row">
						<view class="center" :style="`color:${ item.handle_result.status?'#0add69':'#f13'}`">
							{{item.handle_result.text}}
						</view>
						<view class="right">
							<uni-dateformat :date="item.create_date"></uni-dateformat>
						</view>
					</view>
					<view class="body_row">
						<view class="center"  >
							<text style="font-size:12px">
								处理人
							</text>:
							<text class="titleApp">
								{{item.handle_result.handle_name}}
							</text>
						</view>
						<view class="right" style="display: flex;align-items: center;flex:1" >
							<text style="font-size:10px">
								处理时间 : 
							</text>
							<view style="font-size: 14px;">
								<uni-dateformat format="yyyy/MM/dd hh:mm" :date="item.handle_result.handle_date"></uni-dateformat>
							</view>
						</view>
					</view>
					<view class="body_button">
						<view style="text-align: center;margin:10px 0 0 0 ">
							<button size="mini" type="primary"
								:disabled="item.handle_result.status"  
								@click="this.$refs.showStatus.open() ; this.ID = item._id">
								{{item.handle_result.status? item.handle_result.status? '已处理':'处理':'处理'}}
							</button>
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="uni-pagination-box">
				<uni-pagination @change="enventFneye" :v-model="currentPage" :pageSize="limit" title=""
					:total="total"></uni-pagination>
			</view>
		</view>
	</view>
	<uni-popup ref="showStatus" type="center" backgroundColor="#fff">
		<view class="popup">
			<view class="title" style="color:#199bff">
				请您确保当前问题已经成功解决
			</view>
			<view style="line-height:80rpx;">
				当前问题已经成功解决,请确保问题得到妥善处理（问题得到妥善处理后应向问题发起人进行反馈）。
				<view style="color:#999">
					确认后将改变当前反馈数据信息
				</view>
			</view>
			<button @click="eventExamine" class="uni-button" size="mini" type="primary">
				确认已处理
			</button>
			<button @click=" this.$refs.showStatus.close() " class="uni-button" size="mini" type="">
				取消
			</button>
		</view>
	</uni-popup>
</template>

<script>
	const db = uniCloud.databaseForJQL()
	const collection = "users_report"
	import { areaPower } from "@/js_sdk/manage-area/manage.js";
	export default {
		data() {
			return {
				loading:true,
				// 分页
				total: 0, //  总条数
				skip: 0, // 开始查询位置
				limit: 20, // 单词查询条数
				currentPage: 1, // 当前页
				routes: [{
						to: "/pages/index/index",
						name: "首页",
					},
					{
						to: "",
						name: "日志管理",
					},
					{
						to: "",
						name: "用户举报",
					},
				],
				//a 日期下拉框
				selectTimeVal: 0,
				range: [{
						value: 0,
						text: "查买家"
					},
					{
						value: 1,
						text: "查商家"
					},
					{
						value: 2,
						text: "查骑手"
					},
				],
				ID:'',
				Data: []
			}
		},
		onLoad() {
			this.getOperateLogData()
		},
		methods: {
			getOperateLogData() {
				const feedback = db.collection(collection).getTemp()
				const shops = db.collection("shop").field("area_all,_id").getTemp()
				db.collection(feedback,shops).where({
					"shop_id.area_all.value":db.command.in( areaPower() ),
				}).orderBy("create_date desc").skip(this.skip).limit(10).get({
					getOne: false,
					getCount: true
				}).then(res => {
					this.Data = res.data
					this.total = res.count
					this.loading = false
				})
			},
			// 下拉框
			changeDateSelect(e) {},
			// 分页
			enventFneye(val) {
				this.skip = (val.current - 1) * 10
				this.getOperateLogData()
			},
			// 修改数据
			eventExamine(){
				db.collection(collection).doc(this.ID).update({handle_result:{
					status:1,
					text:"已处理",
					handle_date:new Date().getTime(),
					handle_uid:uni.getStorageSync("uni-id-pages-userInfo")._id,
					handle_name:uni.getStorageSync("uni-id-pages-userInfo").nickname
				}}).then(res=>{
					this.$refs.showStatus.close()
					uni.showModal({
						title:"状态更改成功",
						content:"当前反馈已经成功解决，点击确认返回列表处",
						showcancel:false
					}).then(res=>{
						if (res.confirm) {
							uni.navigateTo({
								url:'/pages/log/report/list'
							})
						}
					})
				});
			},
			getTypeName(num) {
				switch (num) {
					case 1:
						return '买家';
					case 2:
						return '商家';
					case 3:
						return '骑手';
				}
			},
			goUrl(Url){
				uni.navigateTo({
					url:Url
				})
			},
			// 放大图片
			eventImage(image) {
				uni.previewImage({
					urls: [image]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.null{
		width: 100%;
		height:150px;
		display:flex;
		align-items: center;
		justify-content: center;
		color: #999;
	}
	.cards{
		display:grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		column-gap:10px;
		row-gap:20px;
		margin:20px 0;
		.box_list{
			position: relative;
			min-height: 200px;
			border-radius:5px;
			padding:20px 10px 80px 10px;
			box-shadow:0 3px 20px 0 #dadada;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.headerimage{
					flex:.3;
				}
				.text{
					flex:1;
					overflow: hidden; /* 超出部分隐藏 */
					text-overflow: ellipsis; /* 使用省略号代替被截断的文本*/
					display: -webkit-box; /* 将元素作为弹性伸缩盒子 */
					-webkit-line-clamp:1; /* 最多显示两行 */
					-webkit-box-orient: vertical; /* 设置弹性伸缩盒子的子元素垂直排列 */
				}
				.text:last-child{
					flex:.4;
					text-align: right;
				}
			}
			.body_button{
				width:95%;
				position: absolute;
				bottom:10px;
			}
			.row_scroll{
				overflow-x: auto;
				column-gap:10px;
				white-space: nowrap;
				.image{
					display: inline-block; 
					margin:0 10px 0 0;
					width:90px;
					text-align: center;
					min-height:20px;
					background:#f0f0f0;
					border-radius:5px;;
				}
			}
			.body_row{
				display: flex;
				justify-content:left;
				align-items: center;
				margin:5px 0;
				.left{
					flex:.3;
				}
				.center{
					flex:1;
				}
				.right{
					flex:.8;
					color:#868686;
				}
			}
			.body_row , .title , .row_scroll {
				padding:8px 10px;
				border-bottom:2px dotted #eee;
			}
		}
	}
	.animated-item {
		opacity: 0;
		transform:translate3d(10);
		animation: fadeInLeft 1s ease forwards;
	}
	@keyframes fadeInLeft {
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	.popup {
		width: 500px;
		border-radius: 20rpx;
		padding: 30rpx;
	
		button {
			margin: 20px 50rpx;
		}
	}
	
	.swiper-box{
		width: 200px;
	}
	.feedback {
		padding: 20px;
	}
</style>